<template>
	<view class="discount">
		<view class="btn">
			<view @click="changeBtn(1)" :class="status==1 ?'btn-box':''">
				<text>满减</text>
			</view>
			<view @click="changeBtn(2)" :class="status==2 ?'btn-box':''">
				<text>促销</text>
			</view>
		</view>
		<!-- 满减 -->
		<view class="coupon" v-if="status==1">
			<view class="co-item">
				<text class="iconfont">&#xe76b;</text>
				<text>本店购买含优惠券</text>
				<input type="number" v-model="full" maxlength="5" />
				<text>元，</text>
				<text>立减</text>
				<input type="number" v-model="reduce" maxlength="5" />
				<text>元</text>
				<button @click="onAdd" class="button">增加</button>
			</view>
			<block v-if="fullList.length">
				<view class="already">
					已添加的满减
				</view>
				<view class="co-item" v-for="(data,index) in fullList" :key="index">
					<text class="iconfont">&#xe76b;</text>
					<text>本店购买含优惠券</text>
					<text style="color: #FF557D;">{{data.amout_srtart}}</text>
					<text>元，</text>
					<text>立减</text>
					<text style="color: #FF557D;">{{data.discount}}</text>
					<text>元</text>
					<button @click="onDel(data.benefitid)" class="button">删除</button>
				</view>
				
			</block>
			
		</view>
		<!-- 折扣 -->
		<view class="discount" v-if="status==2">
			<!-- 添加折扣商品 -->
			<view class="upDiscount">
				<view class="top-img">
					<image :src="disImg" lazy-load="true" @click="upLoadImg"></image>
					<text>添加折扣商品</text>
				</view>
				<view class="discount-goods">
					<view class="select">
						<view @click="changeSelecyBtn(1)" :class="btnSelect==1 ?'selected':''">
							<text>秒杀</text>
						</view>
						<view @click="changeSelecyBtn(2)" :class="btnSelect==2 ?'selected':''">
							<text>预购</text>
						</view>
						<view @click="changeSelecyBtn(3)" :class="btnSelect==3 ?'selected':''">
							<text>限时购</text>
						</view>
					</view>

					<!-- 秒杀 -->
					<view class="time" v-if="btnSelect==1">
						<view class="time-title">
							<text>秒杀时间:</text>
						</view>
						<view class="time-box">
							<view class="">
								<text>开始时间：</text>
								<input type="text" placeholder="2019.10.02 00.30" />
							</view>
							<view class="">
								<text>结束时间：</text>
								<input type="text" placeholder="2019.10.02 00.30" />
							</view>
						</view>
					</view>

					<!-- 预购 -->
					<view class="time" v-if="btnSelect==2">
						<view class="time-title">
							<text>发货时间:</text>
						</view>
						<view class="time-box">
							<view class="">
								<input type="text" placeholder="2019.10.02 00.30" />
							</view>
						</view>
					</view>

					<!-- 限时购 -->
					<view class="time" v-if="btnSelect==3">
						<view class="time-title">
							<text>下架时间:</text>
						</view>
						<view class="time-box">
							<view class="">
								<input type="text" placeholder="2019.10.02 00.30" />
							</view>
						</view>
					</view>
					<!-- 确认取消按钮 -->
					<view class="btn">
						<view class="cancel">
							<text>取消</text>
						</view>
						<view class="confirm">
							<text>确认</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 折扣商品列表 -->
			<view class="list">
				<view class="disList" v-for="(item,index) in discountList" :key="index">
					<view class="disList-img">
						<image :src="item.image" lazy-load="true"></image>
						<view>
							<text>{{item.title}}</text>
							<text>￥{{item.price}}</text>
						</view>
					</view>
					<view class="disList-goods">
						<view class="selectBtn">
							<view @click="changeStatu(item.id,1)" :class="item.statu==1 ?'selectedColor':''">
								<text>秒杀</text>
							</view>
							<view @click="changeStatu(item.id,2)" :class="item.statu==2 ?'selectedColor':''">
								<text>预购</text>
							</view>
							<view @click="changeStatu(item.id,3)" :class="item.statu==3 ?'selectedColor':''">
								<text>限时购</text>
							</view>
						</view>

						<!-- 秒杀 -->
						<view class="time" v-if="item.statu==1">
							<view class="time-title">
								<text>秒杀时间:</text>
							</view>
							<view class="time-box">
								<view class="">
									<text>开始时间：</text>
									<input type="text" placeholder="2019.10.02 00.30" />
								</view>
								<view class="">
									<text>结束时间：</text>
									<input type="text" placeholder="2019.10.02 00.30" />
								</view>
							</view>
						</view>

						<!-- 预购 -->
						<view class="time" v-if="item.statu==2">
							<view class="time-title">
								<text>发货时间:</text>
							</view>
							<view class="time-box">
								<view class="">
									<input type="text" placeholder="2019.10.02 00.30" />
								</view>
							</view>
						</view>

						<!-- 限时购 -->
						<view class="time" v-if="item.statu==3">
							<view class="time-title">
								<text>下架时间:</text>
							</view>
							<view class="time-box">
								<view class="">
									<input type="text" placeholder="2019.10.02 00.30" />
								</view>
							</view>
						</view>
						<!-- 确认取消按钮 -->
						<view class="btn">
							<view class="cancel">
								<text>取消</text>
							</view>
							<view class="confirm">
								<text>确认</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fullList: [], // 满减列表
				full: '', // 满金额
				reduce: '', // 减金额
				disImg: '/static/imgs/myStore/pic_04.png',
				status: 1,
				btnSelect: 1,
				discountList: [{
						id: 1001,
						statu: 1,
						image: '/static/imgs/myStore/goods_pic.png',
						title: '皇家猫粮室内专用10KG,满50送储粮桶...',
						price: '9.9'
					},
					{
						id: 1002,
						statu: 2,
						image: '/static/imgs/myStore/goods_pic.png',
						title: '皇家猫粮室内专用10KG,满50送储粮桶...',
						price: '9.9'
					},
					{
						id: 1003,
						statu: 3,
						image: '/static/imgs/myStore/goods_pic.png',
						title: '皇家猫粮室内专用10KG,满50送储粮桶...',
						price: '9.9'
					},
				],
			};
		},
		onLoad() {
			this.getFull();
		},
		onPullDownRefresh() {
			this.getFull();
		},
		methods: {
			async onAdd() { // 增加满减
				let a = await this.$http.setShopBenefit({amout_srtart: this.full,discount: this.reduce});
				uni.showToast({
					title: a.message,
					icon: 'none'
				});
				this.getFull();
			},
			async getFull() { // 满减查询
				let a = await this.$http.getFull();
				if(a.code == 200) {
					this.fullList = a.data;
					uni.stopPullDownRefresh()
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				});
			},
			async onDel(id) { // 删除满减
				let a = await this.$http.delShopBenefit({benefitid: id});
				uni.showToast({
					title: a.message,
					icon: 'none'
				});
				this.getFull();
			},
			changeBtn(num) {
				this.status = num
			},
			changeSelecyBtn(count) {
				this.btnSelect = count
			},
			changeStatu(id, cnt) {
				this.discountList.forEach(item => {
					if (item.id == id) {
						item.statu = cnt
					}
				})
			},
			upLoadImg() {
				uni.chooseImage({
					count: 1, //限制1张图片
					sizeType: ['compressed'], //压缩图
					sourceType: ['album'], //从相册选择
					success: res => {
						this.disImg = res.tempFilePaths[0]
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/refund.scss';
</style>
